<template>
  <div class="map-page">
    <div class="header">
      <h3>腾讯地图圆形电子围栏演示</h3>
      <div class="controls">
        <button @click="drawCircle">绘制圆形围栏</button>
        <button @click="addMarker">定位一个点</button>
        <button @click="clearAll">清除所有</button>
      </div>
    </div>
    <div id="container"></div>
  </div>
</template>

<script setup lang="ts">
import { onMounted } from 'vue'

// 声明全局变量
declare global {
  interface Window {
    TMap: any
    circleLayer: any
    markerLayer: any
  }
}

let map: any = null
let overlays: any[] = [] // 存储覆盖物

onMounted(() => {
  document.body.style.overflow = 'hidden'

  const checkTMap = setInterval(() => {
    if (typeof window.TMap !== 'undefined') {
      clearInterval(checkTMap)
      initMap()
    }
  }, 100)
})

// 初始化地图
function initMap() {
  try {
    // 1. 定义地图中心点坐标（纬度, 经度），这里是北京市中心附近
    // new window.TMap.LatLng(lat, lng) 是腾讯地图 SDK 提供的经纬度对象构造函数
    const center = new window.TMap.LatLng(39.984120, 116.307484);

    // 2. 初始化腾讯地图主实例
    // document.getElementById('container') 是承载地图的 DOM 容器，必须是一个有宽高的 div
    // 参数是一个配置对象，用于设置地图的初始状态和行为
    map = new window.TMap.Map(document.getElementById('container'), {
      center: center,         // 地图显示的中心点（经纬度）
      zoom: 15,               // 地图缩放级别，范围通常是 3~20，数字越大越详细，15 是比较适中的城市级别
      draggable: true,        // 是否允许用户拖动地图（默认是 true，可拖拽移动地图视角）
      scrollable: true,      // 是否允许通过鼠标滚轮缩放地图，false 表示禁用滚轮缩放
      zoomControl: true,     // 是否显示地图自带的缩放控件（+/- 按钮），这里设为 false 表示不显示
    });

    // 打印日志，表示地图初始化成功
    console.log('腾讯地图初始化成功');

    // 3. 创建一个 多圆形覆盖物图层（MultiCircle），用于绘制多个圆形，比如围栏
    // MultiCircle 是腾讯地图提供的覆盖物图层类，可以批量管理多个 circle（圆形）
    window.circleLayer = new window.TMap.MultiCircle({
      id: 'circleLayer',      // 图层的唯一标识符（字符串），可用于后续查找或管理该图层
      map: map,               // 指定该图层要添加到哪个地图实例上
      styles: {               // 定义圆形的样式（外观）
        circle: {             // 这里的 'circle' 是样式类型 key，针对所有该类型的几何体
          // color: '#FF0000',   // 圆形边框颜色，这里是红色
          fillColor: '#FFB6C1', // 圆形填充颜色，也是红色
          opacity: 0.9,       // 填充颜色的透明度（0~1），0.8 表示比较不透明
          fillOpacity: 0.3,   // 填充色透明度（有些 SDK 版本用这个字段），0.3 表示较透明
          weight: 2           // 圆形边框线条的宽度（单位：像素），2px
        }
      },
      geometries: []          // 初始时圆形几何体数组为空，后续可以通过 API 添加具体的圆形
    });

    // 4. 创建一个 多标记点图层（MultiMarker），用于在地图上显示多个标记图标，比如定位点、POI等
    window.markerLayer = new window.TMap.MultiMarker({
      id: 'markerLayer',      // 图层唯一 ID
      map: map,               // 指定该图层所属的地图实例
      styles: {               // 定义标记点的样式
        marker: new window.TMap.MarkerStyle({
          width: 25,          // 标记点图片的宽度（像素）
          height: 35,         // 标记点图片的高度（像素）
          anchor: { x: 16, y: 32 }, // 锚点位置，即标记点定位到坐标点时，图片的哪个位置对准坐标
          // {x: 16, y: 32} 表示图片宽 25px 中心偏右下，一般用于底部对齐坐标点
          src: 'https://mapapi.qq.com/web/lbs/javascriptV2/demo/img/markerDefault.png' // 标记点使用的图片 URL
        })
      },
      geometries: []          // 初始时标记点几何体（即具体的标记点数据）为空数组，后续可以动态添加
    });

    // 5. 调用自定义函数，用于在地图上绘制一个或多个圆形围栏
    // （该函数需要你自己实现，可能是往 circleLayer 添加一个或多个 circle 几何体）
    drawCircle();

    // 6. 调用自定义函数，用于在地图上添加一个或多个标记点
    // （该函数需要你自己实现，可能是往 markerLayer 添加 marker 几何体）
    addMarker();

  } catch (error) {
    // 如果在上述过程中出现任何错误（比如 TMap 未加载、DOM 未找到、参数错误等），捕获并打印错误信息
    console.error('腾讯地图初始化失败:', error);
  }
}

// 绘制圆形围栏
function drawCircle() {
  clearOverlays()

  const center = new window.TMap.LatLng(39.984120, 116.307484)

  window.circleLayer.setGeometries([
    {
      styleId: 'circle',
      center: center,
      radius: 1000
    }
  ])

  overlays.push(window.circleLayer)

  // 调整地图视野
  const bounds = new window.TMap.LatLngBounds()
  bounds.extend(new window.TMap.LatLng(center.getLat() + 0.01, center.getLng()))
  bounds.extend(new window.TMap.LatLng(center.getLat() - 0.01, center.getLng()))
  bounds.extend(new window.TMap.LatLng(center.getLat(), center.getLng() + 0.01))
  bounds.extend(new window.TMap.LatLng(center.getLat(), center.getLng() - 0.01))
  map.fitBounds(bounds)
}

// 添加定位点
function addMarker() {
  const position = new window.TMap.LatLng(39.984120, 116.307484)

  // 更新 marker 图层
  window.markerLayer.setGeometries([
    {
      id: 'marker1',
      styleId: 'marker',
      position: position
    }
  ])

  overlays.push(window.markerLayer)
}

// 清除所有覆盖物
function clearAll() {
  clearOverlays()
}

function clearOverlays() {
  if (window.circleLayer) {
    window.circleLayer.setGeometries([])
  }
  if (window.markerLayer) {
    window.markerLayer.setGeometries([])
  }
  overlays = []
}
</script>

<style scoped lang="less">
.map-page {
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100%;
  overflow: hidden;
}

.header {
  padding: 10px;
  background: #f5f5f5;
  border-bottom: 1px solid #ddd;
}

.header h3 {
  margin: 0 0 10px 0;
  color: #333;
}

.controls {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.controls button {
  padding: 8px 16px;
  background: #1890ff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

.controls button:hover {
  background: #40a9ff;
}

#container {
  flex: 1;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
</style>
